<template>
	<page-meta>
		<navigation-bar title="用户详情" title-align="center" background-color="#007AFF" />
	</page-meta>
	<view class="device-share-detail-wrap">
		<view class="user-info-wrap">
			<view class="title-wrap">
				<u--text bold size="15" prefixIcon="account-fill" iconStyle="font-size: 40rpx; margin-right: 10rpx;"
					text="用户信息"></u--text>
			</view>
			<view class="container-wrap">
				<u--text :text="'用户编号：'+form.userId" lineHeight="28"></u--text>
				<u--text :text="'用户名称：'+form.userName" lineHeight="28"></u--text>
				<u--text :text="'手机号码：'+form.phonenumber" lineHeight="28"></u--text>
			</view>
		</view>

		<view class="permission-wrap">
			<view class="title-wrap">
				<u--text bold size="15" prefixIcon="integral-fill" iconStyle="font-size: 40rpx; margin-right: 10rpx;"
					text="设置用户权限"></u--text>
			</view>
			<view class="container-wrap">
				<u-checkbox-group placement="column" @change="checkboxChange">
					<view class="checkbox-item-wrap" v-for="(item, index) in permissionList">
						<u-checkbox :customStyle="{marginBottom: '26rpx'}" :key="index"
							:label="`${item.modelName} (${item.identifier})`" :name="item.modelName"
							:checked="item.checked">
						</u-checkbox>
						<u--text type="info" :text="item.remark ? item.remark : '暂无备注'" size="14"
							margin="-20rpx 0rpx 20rpx 48rpx"></u--text>
					</view>
				</u-checkbox-group>
			</view>
		</view>

		<view class="remark-wrap">
			<view class="title-wrap">
				<u--text bold size="15" prefixIcon="file-text-fill" iconStyle="font-size: 40rpx; margin-right: 10rpx;"
					text="备注信息"></u--text>
			</view>
			<view class="container-wrap">
				<u--textarea v-model="form.remark" placeholder="请输入内容" border="bottom" confirmType="done"></u--textarea>
			</view>
		</view>

		<view class="btn-wrap">
			<u-button v-if="type === 1" type="success" customStyle="margin: 20rpx; padding: 30rpx;" @tap="handleAddUser"
				size="small">确认分享</u-button>
			<u-button v-if="type === 2" type="error" @tap="handleDeleteUser" size="small"
				customStyle="margin: 20rpx; padding: 30rpx;">删除</u-button>
			<u-button v-if="type === 2" type="primary" @tap="handleEditUser" size="small"
				customStyle="margin: 20rpx; padding: 30rpx;">保存</u-button>
		</view>
	</view>
</template>

<script>
	import { addDeviceUser, updateDeviceUser, delDeviceUser } from '@/apis/modules/deviceUser';
	import { getModelPermList } from "@/apis/modules/model";

	export default {
		data () {
			return {
				type: 1, // 类型: 1=新增，2=更新
				permissionList: [], // 权限列表
				selectPerms: [], // 选中的权限列表
				// 表单参数
				form: {
					deviceId: null,
					userId: null,
					deviceName: null,
					userName: null,
					perms: null,
					phonenumber: null,
					remark: null
				}
			};
		},
		onLoad (option) {
			this.form.phonenumber = option.phonenumber;
			this.form.remark = option.remark;
			this.form.userId = option.userId;
			this.form.userName = option.userName;
			this.form.deviceId = option.deviceId;
			this.form.deviceName = option.deviceName;
			this.form.productId = option.productId;
			this.form.perms = option.perms;
			this.type = Number(option.type);

			this.getPermissionList();
		},
		methods: {
			// 查询产品物模型设备权限列表 
			async getPermissionList () {
				if (this.form.perms) {
					this.selectPerms = this.form.perms.split(',');
				}
				getModelPermList(this.form.productId).then((response) => {
					// 固定增加设备系统相关权限
					this.permissionList = [{
						identifier: "ota",
						modelName: "设备升级",
						remark: "设备OTA升级"
					}, {
						identifier: "timer",
						modelName: "设备定时",
						remark: "定时执行任务"
					}, {
						identifier: "log",
						modelName: "设备日志",
						remark: "包含事件日志和指令日志"
					}, {
						identifier: "monitor",
						modelName: "实时监测",
						remark: "下发实时监测指令后，图表实时显示设备上报数据"
					}, {
						identifier: "statistic",
						modelName: "监测统计",
						remark: "图表显示存储的历史监测数据"
					}];
					this.permissionList = this.permissionList.concat(response.data);

					if (this.selectPerms.length > 0) {
						for (let i = 0; i < this.permissionList.length; i++) {
							for (let j = 0; j < this.selectPerms.length; j++) {
								if (this.permissionList[i].identifier == this.selectPerms[j]) {
									this.permissionList[i].checked = true;
									break;
								}
							}
						}
					}
				});
			},
			// 复选框改变事件
			checkboxChange (data) {
				this.selectPerms = [];
				console.log(data)
				for (let i = 0; i < this.permissionList.length; i++) {
					if (data.indexOf(this.permissionList[i].modelName) != -1) {
						this.selectPerms.push(this.permissionList[i].identifier)
					}
				}
				console.log(this.selectPerms)
			},
			// 添加设备用户
			handleAddUser () {
				this.form.perms = this.selectPerms.join(',');
				addDeviceUser(this.form).then(response => {
					uni.showToast({
						icon: 'success',
						title: '设备分享成功'
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
							success: (e) => {
								var pages = getCurrentPages();
								var page = pages[pages.length - 2];
								if (page === undefined || page === null)
									return;
								// 更新列表
								if (uni.getSystemInfoSync().platform === 'devtools') {
									page.$vm.dataList = [];
									page.$vm.getList();
								} else {
									page.dataList = [];
									page.getList();
								}
							}
						});
					}, 1000);
				});
			},
			// 编辑
			handleEditUser () {
				this.form.perms = this.selectPerms.join(',');
				updateDeviceUser(this.form).then(response => {
					uni.showToast({
						icon: 'success',
						title: '修改成功'
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
							success: (e) => {
								var pages = getCurrentPages();
								var page = pages[pages.length - 2];
								if (page === undefined || page === null)
									return;
								// 更新列表
								if (uni.getSystemInfoSync().platform === 'devtools') {
									page.$vm.dataList = [];
									page.$vm.getList();
								} else {
									page.dataList = [];
									page.getList();
								}
							}
						});
					}, 1000);
				});
			},
			// 删除
			handleDeleteUser () {
				uni.showModal({
					title: '系统提示',
					content: '确定删除当前用户吗？',
					success: result => {
						if (result.confirm) {
							uni.showLoading({
								title: '删除中...'
							});
							delDeviceUser(this.form).then(res => {
								if (res) {
									uni.showToast({
										icon: 'success',
										title: res.msg
									});
									setTimeout(() => {
										uni.navigateBack({
											delta: 1,
											success: (e) => {
												var pages = getCurrentPages();
												var page = pages[pages.length - 2];
												if (page === undefined || page ===
													null)
													return;
												// 更新列表
												if (uni.getSystemInfoSync()
													.platform === 'devtools') {
													page.$vm.dataList = [];
													page.$vm.getList();
												} else {
													page.dataList = [];
													page.getList();
												}
											}
										});
									}, 1000);
								}
							}).finally(() => {
								uni.hideLoading();
							});
						}
					}
				});
			},
		}
	};
</script>

<style lang="scss">
	page {
		background: #eef3f7;
	}

	.device-share-detail-wrap {

		padding: 40rpx 0;

		.user-info-wrap,
		.permission-wrap,
		.remark-wrap {
			.title-wrap {
				padding: 0 40rpx;
			}

			.container-wrap {
				margin-top: 10rpx;
				padding: 30rpx 40rpx;
				background: #ffffff;
			}
		}

		.permission-wrap,
		.remark-wrap {
			margin-top: 40rpx;
		}

		.btn-wrap {
			display: flex;
			margin: 80rpx 0;
		}
	}
</style>